<template>
	<view class="nearby-stores-page">
		<!-- 搜索区域 -->
		<view class="search-header">
			<!-- 搜索栏 -->
			<view class="search-section">
				<view class="search-box">
					<input type="text" placeholder="输入需要搜索的内容" v-model="searchKeyword" @confirm="performSearch" />
					<button class="search-btn" @click="performSearch">
						<image src="/static/images/wgh/搜索.png" class="search-icon" mode="aspectFit" />
					</button>
				</view>
			</view>

			<!-- 历史记录 -->
			<view class="history-section">
				<view class="history-row">
					<view class="history-tags">
						<text class="history-title">历史记录:</text>
						<view class="history-tag" v-for="(tag, index) in historyTags" :key="index" @click="searchFromHistory(tag)">{{ tag }}</view>
					</view>
				</view>
			</view>
		</view>

		<scroll-view class="scroll-container" scroll-y="true">

		<!-- 门店列表 -->
		<view class="store-list">
			<view class="store-item" v-for="(store, index) in stores" :key="index" @click="goToStoreDetail(store.id)">
				<view class="store-header">
					<text class="store-name">{{ store.name }}</text>
					<text class="distance">{{ store.distance }}km</text>
				</view>
				<view class="store-rating">
					<view class="stars">
						<text v-for="(star, starIndex) in 5" :key="starIndex" class="star"
							:class="starIndex < store.rating ? 'filled' : 'outline'">★</text>
					</view>
					<text class="rating-text">{{ store.rating }}分</text>
					<text class="sales-text">销量: {{ store.sales }}</text>
				</view>
				<view class="store-content">
					<image :src="store.image" class="store-image" mode="aspectFill"></image>
					<view class="store-info">
						<text class="business-hours">营业时间: {{ store.businessHours }}</text>
						<text class="address">{{ store.address }}</text>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
		
		<!-- 底部提示 -->
		<view class="bottom-tip">
			<text class="tip-text">暂无更多</text>
		</view>
	</view>
</template>

<script>
	// 导入封装的请求工具
	import { get, post } from '@/utils/request.js';
	
	export default {
		data() {
			return {
				searchKeyword: '',
				stores: [],
				historyTags: [],
				typeId: null
			}
		},
		onLoad(options) {
			console.log(options)
			this.typeId = options.typeId || null;
			this.getStoreList(this.typeId)
			this.getSearchHistory();
		},
		onShow() {
			// 页面显示时刷新历史记录
			this.getSearchHistory();
		},
		methods: {
			// 跳转到门店详情页
			goToStoreDetail(id) {
				uni.navigateTo({
					url: `/pages/carMaintenance/storeDetails/storeDetails?shopId=${id}&typeId=${this.typeId}`
				});
			},
			
			// 根据服务类型ID获取门店列表
			getStoreList(id) {
				get(`/merchant/shop/type/${id}`)
					.then(res => {
						console.log(res);
						if (res.code === 200) {
							this.stores = (res.rows || res.data || []).map(this.formatStoreData);
						}
					})
					.catch(error => {
						console.error('获取门店列表失败:', error);
					});
			},
			
			// 格式化营业时间
			formatBusinessHours(startTime, endTime) {
				if (startTime && endTime) {
					const start = startTime.split(' ')[1] || startTime;
					const end = endTime.split(' ')[1] || endTime;
					return `周一至周日 ${start}-${end}`;
				}
				return '营业时间待更新';
			},
			
			// 执行搜索操作
			performSearch() {
				if (!this.searchKeyword.trim()) {
					this.getStoreList(this.typeId);
					return;
				}
				const keyword = this.searchKeyword.trim();
				this.saveSearchHistory(keyword);
				this.searchStores(keyword);
			},
			
			// 根据关键词搜索门店
			searchStores(keyword) {
				get(`/merchant/shop/search`, { name: keyword })
					.then(res => {
						if (res.code === 200) {
							this.stores = (res.rows || res.data || []).map(this.formatStoreData);
							if (this.stores.length === 0) {
								uni.showToast({ title: '未找到相关门店', icon: 'none' });
							}
						}
					})
					.catch(error => {
						console.error('搜索门店失败:', error);
					});
			},
			
			// 格式化门店数据
			formatStoreData(store) {
				return {
					id: store.id,
					name: store.name,
					address: store.address,
					image: store.photo || '/static/images/1.jpg',
					rating: store.rate || 4.5,
					sales: Math.floor(Math.random() * 1000) + 100,
					distance: store.distance || '距离未知',
					businessHours: this.formatBusinessHours(store.startTime, store.endTime)
				};
			},
			
			// 获取搜索历史记录
			getSearchHistory() {
				get('/merchant/shop/history')
					.then(res => {
						if (res.code === 200) {
							this.historyTags = res.data || [];
						}
					})
					.catch(error => {
						console.error('获取搜索历史失败:', error);
					});
			},
			
			// 保存搜索历史
			saveSearchHistory(keyword) {
				post(`/merchant/shop/save?keyword=${encodeURIComponent(keyword)}`)
					.then(res => {
						// 保存成功后刷新历史记录
						this.getSearchHistory();
					})
					.catch(error => {
						console.error('保存搜索历史失败:', error);
					});
			},
			
			// 点击历史记录搜索
			searchFromHistory(keyword) {
				this.searchKeyword = keyword;
				this.performSearch();
			}
		}
	}
</script>

<style scoped>
	.nearby-stores-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #3486FD 0%, #0A64E7 350rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
		width: 100%;
		box-sizing: border-box;
	}

	/* 搜索头部区域样式 */
	.search-header {
		background-color: transparent;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	/* 滚动容器样式 */
	.scroll-container {
		flex: 1;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	/* 搜索栏样式 */
	.search-section {
		padding: 20rpx 30rpx;
		margin-bottom: -10rpx;
		margin-top: 20rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 40rpx;
		padding: 16rpx 30rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.search-box input {
		flex: 1;
		border: none;
		background-color: transparent;
		font-size: 28rpx;
		padding: 10rpx 0;
		outline: none;
		height: 60rpx;
		line-height: 60rpx;
	}

	.search-btn {
		background-color: transparent;
		border: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 40rpx;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
	}

	/* 历史记录样式 */
	.history-section {
		width: 100%;
		padding: 0 30rpx;
		margin-top: -10rpx;
		box-sizing: border-box;
	}

	.history-row {
		display: flex;
		align-items: flex-start;
		gap: 5rpx;
	}

	.history-title {
		font-size: 32rpx;
		color: #fff;
		white-space: nowrap;
		margin-top: 5rpx;
	}

	.history-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		flex: 1;
	}

	.history-tag {
		font-size: 28rpx;
		color: #fff;
		padding: 8rpx 12rpx;
		cursor: pointer;
	}


	/* 门店列表样式 */
	.store-list {
		padding: 0 20rpx;
		position: relative;
		margin-top: 20rpx;
	}

	.store-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.store-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.store-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.distance {
		font-size: 28rpx;
		color: #2b79f5;
		font-weight: 500;
	}

	.store-rating {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.stars {
		display: flex;
		margin-right: 16rpx;
	}

	.star {
		font-size: 28rpx;
		margin-right: 4rpx;
	}

	.star.filled {
		color: #ffd700;
	}

	.star.outline {
		color: #ddd;
	}

	.rating-text {
		font-size: 26rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.sales-text {
		font-size: 26rpx;
		color: #333;
	}

	.store-content {
		display: flex;
		align-items: flex-start;
	}

	.store-image {
		width: 120rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.store-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.business-hours,
	.address {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	/* 底部提示样式 */
	.bottom-tip {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
		position: relative;
	}

	.tip-text {
		font-size: 24rpx;
		color: #999;
		position: relative;
	}

	.tip-text::before,
	.tip-text::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 60rpx;
		height: 1rpx;
		background-color: #ddd;
	}

	.tip-text::before {
		left: -80rpx;
	}

	.tip-text::after {
		right: -80rpx;
	}
</style>